<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大麦网-演唱会页面-使用模板引擎</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="./css/index01.css">
</head>

<body>
    <div class="container">
        <ul class="list">
            <input id="title" type="text">
            <button id="btn">搜索</button>
        </ul>
        <ul class="flex list" id="city">
            <li>城市：</li>
            <!-- 第二步：在网页中定义模板 -->
            <script id="city_template" type="text/html">
                {{each $data item index}}
                    <li class="{{index===0?'active':''}}">{{item.city}}</li>
                {{/each}}
            </script>
        </ul>
        <ul class="flex list" id="type">
            <li>分类：</li>
            <script id="type_template" type="text/html">
                {{each $data item index}}
                    <li class="{{index===0?'active':''}}">{{item.type}}</li>
                {{/each}}
            </script>
        </ul>
        <div class="content">
            
        </div>
    </div>
    <!-- 定义渲染内容的模板 -->
    <script id="show_template" type="text/html">
        {{each $data item index}}
        <div class="show flex">
            <img
                src="{{item.img}}">
            <ul>
                <li class="title">{{item.title}}</li>
                <li>{{item.city}}</li>
                <li>{{item.type}}</li>
                <li>{{item.time}}</li>
            </ul>
        </div>
        {{/each}}
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 第一步：引入artTemplate模板引擎库 -->
    <script src="./js/artTemplate.js"></script>
    <script>
        //ajax请求数据，并将数据在页面中显示
        //加载城市数据
        $.get("./data/city.json", (res) => {
            //第三步：通过template()方法，将数据传给模板，返回生成的html内容
            let html = template("city_template",res)
            //第四步：将生成的html内容，放置到网页的指定区域
            $('#city').append(html)
        });
        //加载分类数据
        $.get("./data/type.json", (res) => {
            let html = template('type_template',res)
            $('#type').append(html)
        });
        
        //加载数据的方法
        function loadData(){
            // $('.content').empty()  //清除之前的内容
            //加载内容数据
            $.get("./data/show.json", (res) => {
                //对数据进行筛选
                //获取搜索文本框里面的内容
                let title = $('#title').val().trim()
                if(title){
                    //includes()方法，用于判断字符串是否包含其中
                    res = res.filter(r=>r.title.includes(title))
                }
                //获取高亮城市的名称
                let city = $('#city li[class="active"]').text()
                if(city!=='全部'){
                    res = res.filter(r=>r.city===city)
                }
                //获取高亮分类的名称
                let type = $('#type li[class="active"]').text()
                if(type!=='全部'){
                    res = res.filter(r=>r.type===type)
                }
                //利用模板引擎，将数据根据模板返回html内容
                let html = template('show_template',res)
                //append()方法，是追加内容
                // $('.content').append(html)
                //将返回的html内容，在指定区域显示
                $('.content').html(html)
            });
        }
        loadData()  //调用加载数据的方法

        //注意：这里的li点击事件，需要委托给父级注册
        $('#city').on('click','li:not(:eq(0))',function(){
            //切换高亮
            $(this).addClass('active').siblings('.active').removeClass('active')
            loadData()  //调用加载数据的方法
        })
        $('#type').on('click','li:not(:eq(0))',function(){
            //切换高亮
            $(this).addClass('active').siblings('.active').removeClass('active')
            loadData()  //调用加载数据的方法
        })

        //搜索按钮点击事件
        $('#btn').click(function(){
            loadData()  //调用加载数据的方法
        })
    </script>
</body>

</html>